<template>
  <div id="index_layer">
     <!-- class="bg_color_rgb08" -->
      <!-- bg_color_rgbf1 -->
    <div class="index_layer_body ">
      <!-- <el-icon @click="$parent.indexlayervisible = false"><CloseBold /></el-icon> -->
      <!-- <h4 class="pl12 border_b_1_c9">{{$parent.bottomtitle}}</h4> -->
      <!-- 工序流程 -->
      <div class="layer_jgxline clearfix">
        <div class="gxsr gx fl">
          <h4 class="pl12 bg_color_rgb05">工序输入</h4>
          <ul class="gx_detail clearfix">
            <li class="fl" v-for="(item, index) in gxdetail.prev" :key="index">
              <img :src="'/public//images/layer/'+item.src+'.png'" alt="">
              <p class="bg_color_rgb05">{{item.name}}</p>
            </li>
          </ul>
        </div>
        <div class="index_layer_line fl ml16 mt80">
          <p v-if="stepIndex==1">正在加工中</p>
          <p v-if="stepIndex>1">完成加工</p>
          <el-icon><CaretRight /></el-icon>
          <div class="index_layer_line_bar" :class="stepIndex>1?'index_layer_line_bar2':''" v-if="stepIndex>0">
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
            <div class="fl mr20"><el-icon><CaretRight /></el-icon></div>
          </div>
        </div>
        <div class="gxsc gx fr">
          <h4 class="pl12 bg_color_rgb05">工序输出</h4>
          <ul class="gx_detail clearfix" v-if="stepIndex>1">
            <li class="fl" v-for="(item, index) in gxdetail.next" :key="index">
              <img :src="'/public//images/layer/'+item.src+'.png'" alt="">
              <p class="bg_color_rgb05">{{item.name}}</p>
            </li>
          </ul>
          <div class="waiting_text" v-else>待执行</div>
        </div>
      </div>
      <!-- 表格 -->
       <div class="layer_bottom clearfix mt16">
        <el-table class="gxprev_table fl" :data="layertable.prev" border>
          <el-table-column align="center" label="工序输入">
            <el-table-column align="center" type="index" label="No" width="55" />
            <el-table-column align="center" prop="name" label="名称" width="160" />
            <el-table-column align="center" prop="value" label="数值" />
          </el-table-column>
        </el-table>
        <el-table class="gxrunning_table ml16 fl" :data="layertable.runing" border v-if="stepIndex>0">
          <el-table-column align="center" label="执行过程">
            <el-table-column align="center" type="index" label="No" width="55" />
            <el-table-column align="center" prop="name" label="名称" width="160" />
            <el-table-column align="center" prop="value" label="数值" />
          </el-table-column>
        </el-table>
        <el-table class="gxrunning_table ml16 fl" border v-else>
          <el-table-column align="center"  label="执行过程">
            <el-table-column align="center" type="index" label="No" width="55" />
            <el-table-column align="center" prop="name" label="名称" width="160" />
            <el-table-column align="center" prop="value" label="数值" />
          </el-table-column>
        </el-table>
        <el-table class="gxprev_table fr" :data="layertable.next" border v-if="stepIndex>1">
          <el-table-column align="center"  label="工序输出">
            <el-table-column align="center" type="index" label="No" width="55" />
            <el-table-column align="center" prop="name" label="名称" width="160" />
            <el-table-column align="center" prop="value" label="数值" />
          </el-table-column>
        </el-table>
        <el-table class="gxprev_table fr" border v-else>
          <el-table-column align="center"  label="工序输入">
            <el-table-column align="center" type="index" label="No" width="55" />
            <el-table-column align="center" prop="name" label="名称" width="160" />
            <el-table-column align="center" prop="value" label="数值" />
          </el-table-column>
        </el-table>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index_layer',
  components: {
  },
  data() {
    return {
      stepIndex: 2,
      gxdetail: {},
      layertable: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$http.get('/public/mock/1/'+this.$parent.toptab+'.json').then((res) => {
        let data = res.data
        
        if (data.code == 200) {
          this.gxdetail = data.data.imgs
          this.layertable = data.data.table
        }
      })
    })
  },
  methods: {
  }
}
</script>

<style lang="less">
#index_layer {
  width: 100%;
  // height: 100%;
  // position: fixed;
  // top: 0;
  // left: 0;
  // overflow: hidden;

  &>div.index_layer_body {
    width: calc(100% - 24px);
    width: 100%;
    // height: calc(100% - 24px);
    margin: 0 auto;
    overflow: hidden;
    // position: relative;

    &>i.el-icon{
      color: #fff;
      font-size: 22px;
      position: absolute;
      top: 0;
      right: 0;
    }

    h4 {
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 15px;
      font-weight: normal;
      color: #fff;
    }

    // 加工工序
    &>div.layer_jgxline{
      width: calc(100% - 100px);
      // height: 212px;
      overflow: hidden;
      margin: 12px auto 0;

      &>div.gx{
        width: 520px;
        // height: 320px;

        &>div.waiting_text{
          width: 100%;
          height: 172px;
          text-align: center;
          line-height: 172px;
          color: #333;
          background-color: #fff;
        }

        &>ul.gx_detail{
          width: 100%;
          // height: 172px;

          &>li{
            width: 50%;

            img{
              width: 100%;
              height: 120px;
              display: block;
            }

            &>p{
              width: 100%;
              height: 28px;
              text-align: center;
              line-height: 28px;
              color: #fff;
              font-size: 14px;
            }
          }
          &>li:first-child{
            img{
              border-right: 1px solid #000;
            }

            &>p{
              border-right: 1px solid #fff;
            }
          }
        }
      }
      &>div.index_layer_line{
        width: calc(100% - 520px - 520px - 32px);
        height: 8px;
        background-color: #fff;
        position: relative;

        &>p{
          width: 70px;
          color: #fff;
          font-size: 14px;
          position: absolute;
          left: 50%;
          top: -22px;
          margin-left: -35px;
        }

        &>i{
          color: #fff;
          position: absolute;
          font-size: 24px;
          top: -8px;
          right: -10px;
        }

        &>div.index_layer_line_bar{
          height: 8px;
          position: absolute;
          top: 0;
          left: 8px;

          &>div{
            width: 32px;
            height: 8px;
            background-color: #409eff;
            position: relative;

            &>i{
              color: #409eff;
              font-size: 15px;
              position: absolute;
              top: -3.5px;
              right: -9px;
            }
          }
        }
        &>div.index_layer_line_bar2{
          &>div{
            background-color: green;
            
            &>i{
              color: green;
            }
          }
        }
      }
    }

    &>div.layer_bottom{
      width: calc(100% - 100px);
      height: calc(100% - 212px - 40px - 16px - 64px);
      margin: 0 auto;

      &>div.el-table{
        height: 160px;
      }

      &>div.gxprev_table{
        width: 520px;
      }

      &>div.gxrunning_table{
        width: calc(100% - 520px - 520px - 32px);
      }
    }
  }
}
</style>
